<template>
    <view class="container" v-if="show">
        <view class="title">基础信息</view>
        <view class="module">
            <view class="flex-between rowline" @click="selectCategory">
                <view><text class="red">*</text>商品分类</view>
                <view :class="category == '请设置商品分类' ? 'placeColor' : ''"
                    >{{ category
                    }}<uni-icons v-if="look == 0" type="arrowright" size="20" customIcons="placeColor"></uni-icons
                ></view>
            </view>
            <view class="rowTextarea">
                <view><text class="red">*</text>商品名称</view>
                <textarea
                    placeholder="请输入商品名称"
                    :disabled="look == 1"
                    maxlength="50"
                    v-model="productName"></textarea>
            </view>
            <view class="rowImg">
                <view class="row-label">商品主图</view>
                <view class="imgbox" style="flex: 1">
                    <img-item :data="thumbnailUrl50" @chooseImage="chooseImage" :look="look" :num="1"></img-item>
                    <text class="tips" style="margin-top: -34rpx">支持gif,jpg,jpeg,bmg,png(建议尺寸650*650)</text>
                </view>
            </view>
        </view>
        <view class="title">销售信息</view>
        <view class="module">
            <view class="flex-between rowline" @click="selectUnit">
                <view><text class="red">*</text>单位</view>
                <view
                    >{{ UnitModel.Name
                    }}<uni-icons v-if="look == 0" type="arrowright" size="20" customIcons="placeColor"></uni-icons
                ></view>
            </view>
            <view class="flex-between rowline" @click="goPrice">
                <view><text class="red">*</text>价格</view>
                <view
                    class="flex-start"
                    v-if="this.ProductModel.ProductSkuList && this.ProductModel.ProductSkuList.length > 1">
                    <view>多规格</view>
                    <uni-icons type="arrowright" size="20" customIcons="placeColor"></uni-icons>
                </view>
                <input
                    v-else
                    type="number"
                    v-model="salePrice"
                    :disabled="look == 1"
                    placeholder="请输入价格"
                    placeholder-class="placeColor" />
            </view>
            <view class="flex-between rowline" @click="goPrice">
                <view><text class="red">*</text>成本价</view>
                <view
                    class="flex-start"
                    v-if="this.ProductModel.ProductSkuList && this.ProductModel.ProductSkuList.length > 1">
                    <view>多规格</view>
                    <uni-icons type="arrowright" size="20" customIcons="placeColor"></uni-icons>
                </view>
                <input
                    v-else
                    type="number"
                    v-model="markePrice"
                    :disabled="look == 1 || enter == 1"
                    placeholder="请输入成本价"
                    placeholder-class="placeColor" />
            </view>
            <view class="flex-between rowline">
                <view>起订量</view>
                <input
                    type="number"
                    v-model="MinNum"
                    :disabled="look == 1"
                    placeholder="请输入起订量"
                    placeholder-class="placeColor" />
            </view>
            <view class="flex-between rowline" @click="goStock">
                <view>库存</view>
                <view
                    class="flex-start"
                    v-if="this.ProductModel.ProductSkuList && this.ProductModel.ProductSkuList.length > 1">
                    <view>多规格</view>
                    <uni-icons type="arrowright" size="20" customIcons="placeColor"></uni-icons>
                </view>
                <input
                    v-else
                    type="number"
                    v-model="stock"
                    :disabled="look == 1"
                    placeholder="请输入库存"
                    placeholder-class="placeColor" />
            </view>
            <view class="flex-between rowline" @click="goWeight">
                <view>重量(KG)</view>
                <view
                    class="flex-start"
                    v-if="this.ProductModel.ProductSkuList && this.ProductModel.ProductSkuList.length > 1">
                    <view>多规格</view>
                    <uni-icons type="arrowright" size="20" customIcons="placeColor"></uni-icons>
                </view>
                <input
                    v-else
                    type="number"
                    v-model="Weight"
                    :disabled="look == 1"
                    placeholder="请输入重量"
                    placeholder-class="placeColor" />
            </view>
            <view class="flex-between rowline" @click="goVolume">
                <view>体积(m³)</view>
                <view
                    class="flex-start"
                    v-if="this.ProductModel.ProductSkuList && this.ProductModel.ProductSkuList.length > 1">
                    <view>多规格</view>
                    <uni-icons type="arrowright" size="20" customIcons="placeColor"></uni-icons>
                </view>
                <input
                    v-else
                    type="number"
                    v-model="Volume"
                    :disabled="look == 1"
                    placeholder="请输入重量"
                    placeholder-class="placeColor" />
            </view>
            <view class="flex-start rowline" v-if="false">
                <view class="row-label">是否包邮</view>
                <view class="tags">
                    <view class="flex-start" @click="postageClick(1)">
                        <view class="radio-no" v-if="!postage1"></view>
                        <view class="radio-yes" v-else><view></view></view>
                        <view>否</view>
                    </view>
                    <view class="flex-start" @click="postageClick(2)">
                        <view class="radio-no" v-if="!postage2"></view>
                        <view class="radio-yes" v-else><view></view></view>
                        <view>是</view>
                    </view>
                </view>
            </view>
            <view class="flex-between rowline" @click="selectPostage">
                <view>运费模板</view>
                <view :class="postageTemplateName == '请选择运费模板' ? 'placeColor' : ''"
                    >{{ postageTemplateName
                    }}<uni-icons v-if="look == 0" type="arrowright" size="20" customIcons="placeColor"></uni-icons
                ></view>
            </view>
        </view>
        <view class="title">其他信息</view>
        <view class="module">
            <view class="flex-between rowline">
                <view><text class="red">*</text>编码</view>
                <view class="flex-start"
                    ><input
                        type="text"
                        v-model="productCode"
                        :disabled="look == 1"
                        placeholder="请输入编码"
                        placeholder-class="placeColor" /><iconsfont
                        v-if="look == 0"
                        style="margin-left: 10rpx"
                        customIcons="icon-xiugai"
                        :color="'#999'"
                        size="32"></iconsfont
                ></view>
            </view>
            <view class="flex-between rowline" @click="selectProductline">
                <view><text class="red">*</text>产品线</view>
                <view :class="productLine == '请选择产品线' ? 'placeColor' : ''"
                    >{{ productLine
                    }}<uni-icons v-if="look == 0" type="arrowright" size="20" customIcons="placeColor"></uni-icons
                ></view>
            </view>
            <view class="rowImg">
                <view class="row-label">轮播图片</view>
                <view class="imgbox" style="flex: 1">
                    <img-item :data="imageUrl" :look="look" @chooseImage="chooseImage1" :num="9"></img-item>
                    <!-- 				<view class="flex-start imginsertion"  v-if="look==0" @click="insertionImg">
						<view class="noselect" v-if="!imginsertionShow"></view>
						<view class="yesselect" v-else>
							<iconsfont customIcons="icon-dagou" class="iconselect" :color="'#ffffff'" size="20" ></iconsfont>
						</view>
						<view>把轮播图插入商品介绍</view>
					</view> -->
                    <text class="tips">支持gif,jpg,jpeg,bmg,png(建议尺寸650*650)</text>
                </view>
            </view>
            <view class="rowTextarea">
                <view>商品介绍</view>
                <textarea
                    placeholder="请输入商品说明"
                    :disabled="look == 1"
                    maxlength="50"
                    v-model="Description"></textarea>
            </view>
            <view class="rowImg">
                <view class="imgbox" style="flex: 1">
                    <img-item :data="DescriptionImges" :look="look" @chooseImage="chooseImageDesc" :num="9"></img-item>
                    <text v-if="look == 0 && product_id == 0" class="tips"
                        >支持gif,jpg,jpeg,bmg,png(建议尺寸650*650)</text
                    >
                    <text v-if="look == 1 || product_id > 0" class="tips" style="margin-top: -34rpx"
                        >变更请重新上传</text
                    >
                    <view v-if="look == 1 || product_id > 0" @click="goDescription" class="more">查看历史介绍>></view>
                </view>
            </view>
            <view class="rowImg border" v-if="false">
                <view class="row-label">标签</view>
                <view class="tags">
                    <view class="flex-start">
                        <view class="noselect" v-if="!imginsertionShow"></view>
                        <view class="yesselect" v-else>
                            <iconsfont customIcons="icon-dagou" :color="'#ffffff'" size="20"></iconsfont>
                        </view>
                        <view>促销</view>
                    </view>
                </view>
            </view>
            <view class="flex-start rowline" v-if="false">
                <view class="row-label">销售状态</view>
                <view class="tags">
                    <view class="flex-start">
                        <view class="radio-no" v-if="!imginsertionShow"></view>
                        <view class="radio-yes" v-else><view></view></view>
                        <view>上架</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer" v-if="look == 0">
            <view class="btn btn-success-hollow" @click="submit">保存</view>
        </view>
    </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex"
import { InitProductData, GetMaxProductCode, SaveProduct } from "@/pages/api/product.js"
import imgItem from "@/pages_supplier/components/form/img-item.vue"
export default {
    components: {
        imgItem,
    },
    data() {
        return {
            show: false,
            category: "请设置商品分类",
            postageTemplateName: "请选择运费模板",
            postageTemplateId: 0,
            productCategoryId: 0,
            productName: "",
            thumbnailUrl50: "", //主图
            markePrice: 0,
            productCode: "",
            salePrice: "",
            productLine: "请选择产品线",
            postage1: true,
            postage2: false,
            code: 12213,
            upimg: "",
            imageUrl: "", //轮播图
            Description: "",
            DescriptionImges: "",
            imginsertionShow: true,
            CategoryList: [],
            PostListId: "",
            UnitList: [],
            PostList: [],
            LineList: [],
            UnitModel: {},
            product_id: 0, //0 新增商品 >0 编辑
            stock: "",
            Weight: "",
            Volume: "",
            MinNum: 1,
            ProductModel: {
                ProductSkuList: [],
            },
            look: "0", //商品详情  等于1 查看无法编辑
            enter: 0, //已入驻的成本价不能编辑 1
        }
    },
    watch: {
        //监听更新
        getUpAddView(e) {
            this.getinfo()
        },
    },
    computed: {
        ...mapGetters(["getUpAddView"]),
    },
    mounted() {
        this.getinfo()
        if (this.product_id == 0) {
            this.getCode()
        }
    },
    onLoad(e) {
        if (e.id) {
            this.product_id = e.id
            if (e.id > 0) {
                uni.setNavigationBarTitle({
                    title: "编辑商品",
                })
            }
        }
        if (e.look) {
            this.look = e.look
            uni.setNavigationBarTitle({
                title: "商品详情",
            })
        }
        if (e.enter) {
            this.enter = e.enter
        }
    },
    methods: {
        ...mapMutations(["UP_PRODUCT_VIEW"]),
        getinfo() {
            let path = "?product_id=" + this.product_id
            InitProductData(path).then((res) => {
                if (res.State == 1) {
                    this.CategoryList = res.Data.CategoryList
                    this.UnitList = res.Data.UnitList
                    if (res.Data.UnitModel.Id > 0) {
                        this.UnitModel = res.Data.UnitModel
                    } else {
                        this.UnitModel = res.Data.UnitList[0]
                    }
                    this.PostList = res.Data.PostList
                    this.LineList = res.Data.LineList
                    this.productLine = this.LineList[0].Name
                    this.lineId = this.LineList[0].ID
                    if (this.product_id > 0) {
                        let ProductModel = res.Data.ProductModel
                        this.productCategoryId = ProductModel.ProductCategoryId
                        this.category = ProductModel.ProductCategoryName
                        this.postageTemplateName = ProductModel.PostageTemplateName
                        this.postageTemplateId = ProductModel.PostageTemplateId
                        this.productName = ProductModel.ProductName
                        this.thumbnailUrl50 = ProductModel.ThumbnailUrl50
                        this.imageUrl = ProductModel.ImageUrl
                        this.lineId = ProductModel.LineId
                        this.productLine = ProductModel.LineName
                        this.MinNum = ProductModel.MinNum
                        if (ProductModel.IsInsertImgs == 0) {
                            this.imginsertionShow = false
                        } else {
                            this.imginsertionShow = true
                        }
                        if (ProductModel.ProductSkuList.length == 1) {
                            this.salePrice = ProductModel.ProductSkuList[0].SalePrice
                            this.stock = ProductModel.ProductSkuList[0].Stock
                            this.Weight = ProductModel.ProductSkuList[0].Weight
                            this.Volume = ProductModel.ProductSkuList[0].Volume
                            this.markePrice = ProductModel.ProductSkuList[0].CostPrice
                        }
                        this.productCode = ProductModel.ProductCode
                        this.ProductModel = ProductModel
                    }
                    this.show = true
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getCode() {
            GetMaxProductCode().then((res) => {
                if (res.State == 1) {
                    this.productCode = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        chooseImage(index, vaule) {
            this.thumbnailUrl50 = vaule
        },
        chooseImage1(index, vaule) {
            this.imageUrl = vaule
        },
        chooseImageDesc(index, vaule) {
            this.DescriptionImges = vaule
        },
        selectCategory() {
            if (this.look == 1) {
                return
            }
            uni.navigateTo({
                url:
                    "/pages/addProduct/select-category?id=" +
                    this.product_id,
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            this.category = data.Name
                            this.productCategoryId = data.ID
                        }
                    },
                },
            })
        },
        selectUnit() {
            if (this.look == 1) {
                return
            }
            uni.navigateTo({
                url:
                    "/pages/addProduct/select-unit?data=" +
                    JSON.stringify(this.UnitList) +
                    "&id=" +
                    this.UnitModel.Id,
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            this.UnitModel.Name = data.Name
                            this.UnitModel.Id = data.Id
                        }
                    },
                },
            })
        },
        selectPostage() {
            if (this.look == 1) {
                return
            }
            uni.navigateTo({
                url:
                    "/pages/addProduct/select-freight?data=" +
                    JSON.stringify(this.PostList) +
                    "&id=" +
                    this.postageTemplateId,
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            this.postageTemplateName = data.Title
                            this.postageTemplateId = data.ID
                        }
                    },
                },
            })
        },
        selectProductline() {
            if (this.look == 1) {
                return
            }
            uni.navigateTo({
                url:
                    "/pages/addProduct/select-productline?data=" +
                    JSON.stringify(this.LineList) +
                    "&id=" +
                    this.lineId,
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            this.productLine = data.Name
                            this.lineId = data.ID
                        }
                    },
                },
            })
        },
        postageClick(num) {
            if (num == 1) {
                this.postage1 = true
                this.postage2 = false
            } else {
                this.postage2 = true
                this.postage1 = false
            }
        },
        insertionImg() {
            if (this.look == 1) {
                return
            }
            this.imginsertionShow = !this.imginsertionShow
        },
        submit() {
            if (!this.productCategoryId) {
                this.easyToast("请选择商品分类")
                return
            }
            if (this.productName == "") {
                this.easyToast("请输入商品名称")
                return
            }
            // if(this.thumbnailUrl50 == ''){
            // 	this.easyToast("请上传商品主图");
            // 	return
            // }

            if (this.productCode == "") {
                this.easyToast("请输入编码")
                return
            }
            let path = "?typeId=0&IsUpdateProductAttribute=0&CheckResult=0"
            if (this.product_id == 0) {
                if (this.salePrice == "" || parseInt(this.salePrice) <= 0) {
                    this.easyToast("请输入正确的价格")
                    return
                }
                if (Math.sign(this.markePrice) == -1) {
                    this.easyToast("请输入正确的成本价")
                    return
                }
                //新添加
                let param = {
                    productCategoryId: this.productCategoryId,
                    productName: this.productName,
                    thumbnailUrl50: this.thumbnailUrl50,
                    isInsertImgs: 0,
                    imageUrl: this.imageUrl,
                    lineId: this.lineId,
                    productCode: this.productCode,
                    status: 0,
                    saleStatus: 2,
                    MinNum: this.MinNum ? this.MinNum : 1,
                }
                let productUnitPriceList = []
                let subobj = {
                    price: this.salePrice,
                    unitId: this.UnitModel.Id,
                    unitName: this.UnitModel.Name,
                    ratio: 1,
                }
                productUnitPriceList.push(subobj)
                let obj = {
                    sku: this.productCode,
                    stock: this.stock ? this.stock : 0,
                    Weight: this.Weight ? this.Weight : 0,
                    Volume: this.Volume ? this.Volume : 0,
                    costPrice: this.markePrice ? this.markePrice : 0,
                    productUnitPriceList: productUnitPriceList,
                }
                let productSkuList = []
                productSkuList.push(obj)
                param.productSkuList = productSkuList
                if (this.postageTemplateId > 0) {
                    param.postageTemplateId = this.postageTemplateId
                }
                if (this.imageUrl != "") {
                    param.imageUrl = this.imageUrl
                }
                if (this.Description != "") {
                    param.Description = this.Description
                }
                if (this.DescriptionImges != "") {
                    param.DescriptionImges = this.DescriptionImges
                }
                console.log(param)
                SaveProduct(param, path).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("添加成功")
                        setTimeout((e) => {
                            this.easyReLaunch("/pages/index/index")
                        }, 2000)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            } else {
                //编辑
                if (this.ProductModel.ProductSkuList.length == 1) {
                    if (this.salePrice == "" || parseInt(this.salePrice) <= 0) {
                        this.easyToast("请输入正确的价格")
                        return
                    }
                }
                if (Math.sign(this.markePrice) == -1) {
                    this.easyToast("请输入正确的成本价")
                    return
                }
                this.ProductModel.postageTemplateId = this.postageTemplateId
                this.ProductModel.ProductCategoryId = this.productCategoryId
                this.ProductModel.ProductName = this.productName
                this.ProductModel.ThumbnailUrl50 = this.thumbnailUrl50
                this.ProductModel.ImageUrl = this.imageUrl
                this.ProductModel.LineId = this.lineId
                this.ProductModel.LineName = this.productLine
                this.ProductModel.ProductCode = this.productCode
                this.ProductModel.Description = this.Description
                this.ProductModel.DescriptionImges = this.DescriptionImges
                this.ProductModel.MinNum = this.MinNum

                // if(this.imginsertionShow == false){
                // 	this.ProductModel.IsInsertImgs=0
                // }else{
                // 	this.ProductModel.IsInsertImgs=1
                // }
                if (this.ProductModel.ProductSkuList.length == 1) {
                    this.ProductModel.ProductSkuList[0].ProductUnitPriceList[0].Price = this.salePrice
                    this.ProductModel.ProductSkuList[0].Stock = this.stock
                    this.ProductModel.ProductSkuList[0].Weight = this.Weight
                    this.ProductModel.ProductSkuList[0].Volume = this.Volume
                    this.ProductModel.ProductSkuList[0].CostPrice = this.markePrice
                }
                // if(this.ProductModel.ProductUnitList.length==1){
                // 	this.ProductModel.ProductUnitList[0].UnitName = this.UnitModel.Name;
                // 	this.ProductModel.ProductUnitList[0].UnitId = this.UnitModel.Id;
                // }
                this.ProductModel.ProductSkuList.forEach((e, i) => {
                    e.ProductUnitPriceList.forEach((rsp, index) => {
                        if (rsp.Ratio == 1) {
                            rsp.UnitName = this.UnitModel.Name
                            rsp.UnitId = this.UnitModel.Id
                        }
                    })
                })
                SaveProduct(this.ProductModel, path).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("修改成功")
                        this.UP_PRODUCT_VIEW(new Date().getTime())
                        setTimeout((e) => {
                            this.easyGoBack()
                        }, 2000)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            }
        },
        goPrice() {
            if (this.ProductModel.ProductSkuList.length > 1) {
                this.easyGoTo(
                    "/pages/addProduct/set-price?id=" +
                        this.product_id +
                        "&look=" +
                        this.look +
                        "&enter=" +
                        this.enter,
                )
            }
        },
        goStock() {
            if (this.ProductModel.ProductSkuList.length > 1) {
                this.easyGoTo(
                    "/pages/addProduct/set-stock?id=" + this.product_id + "&look=" + this.look,
                )
            }
        },
        goWeight() {
            if (this.ProductModel.ProductSkuList.length > 1) {
                this.easyGoTo(
                    "/pages/addProduct/set-weight?id=" + this.product_id + "&look=" + this.look,
                )
            }
        },
        goVolume() {
            if (this.ProductModel.ProductSkuList.length > 1) {
                this.easyGoTo(
                    "/pages/addProduct/set-volume?id=" + this.product_id + "&look=" + this.look,
                )
            }
        },
        goDescription() {
            this.easyGoTo("/pages/addProduct/description?id=" + this.product_id)
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: 12rpx 12rpx 130rpx 12rpx;
}
.title {
    margin: 12rpx 12rpx 0 12rpx;
    height: 88rpx;
    background: #ececec;
    border-radius: 8rpx 8rpx 0px 0px;
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    padding-left: $app-item-padding;
    display: flex;
    align-items: center;
}

.module {
    background: #fff;
    border-radius: 8rpx 8rpx 0px 0px;
    padding: 0 $app-item-padding;
    margin-bottom: 24rpx;
    .rowline {
        height: 112rpx;
        align-items: center;
        color: #333333;
        font-size: 32rpx;
        border-bottom: 3rpx solid #ebebeb;
        input {
            text-align: right;
            height: 112rpx;
        }
    }
    .border {
        border-bottom: 3rpx solid #ebebeb;
        padding-bottom: 24rpx;
    }
    .rowline:last-child {
        border-bottom: none;
    }
    .placeColor {
        font-size: 30rpx;
        color: $color-gray-3;
    }
    .rowTextarea {
        & > view {
            height: 86rpx;
            color: #333333;
            font-size: 32rpx;
            display: flex;
            align-items: center;
        }
        textarea {
            width: calc(100% - 48rpx);
            padding: $app-item-padding;
            height: 84rpx;
            background: #f7f7f7;
            border-radius: 8rpx;
        }
    }
    .rowImg {
        display: flex;
        justify-content: flex-start;
        padding-top: 32rpx;

        .tips {
            display: block;

            padding-bottom: 24rpx;
            font-size: 20rpx;
            color: #cccccc;
        }
        .more {
            color: #333333;
            font-size: 24rpx;
            padding-bottom: 24rpx;
        }
    }
    .rowline-start {
        display: flex;
        justify-content: flex-start;
    }
    .tags {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex: 1;
        .flex-start {
            padding-right: 32rpx;
        }
    }
    .row-label {
        margin-right: 44rpx;
        max-width: 180rpx;
        color: #333333;
        font-size: 32rpx;
    }
}
.red {
    color: #ef1f1f;
    padding-right: 4rpx;
}
.imginsertion {
    font-size: 24rpx;
    color: #333333;
    margin-top: -24rpx;
    padding-bottom: 16rpx;
}
.noselect {
    width: 26rpx;
    height: 26rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 8rpx;
    margin-right: 12rpx;
}
.yesselect {
    width: 30rpx;
    height: 30rpx;
    background: $app-color-main;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    margin-right: 12rpx;
    .iconselect {
        margin-top: 8rpx;
    }
}

.btn {
    margin: 16rpx 30rpx 0 30rpx;
}
</style>
